<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Creating and Positioning an Overlay</title>
        <style type="text/css">
            /*margin and padding on body element
             can introduce errors in determining
             element position and are not recommended;
             we turn them off as a foundation for YUI
             CSS treatments. */
            body {
                margin: 0;
                padding: 0;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/fonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/container/assets/skins/sam/container.css" />
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js">
        </script>
        <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js">
        </script>
        <!--there is no custom header content for this example-->
    </head>
    <body class=" yui-skin-sam">
        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
        <style>
            .yui-overlay {
                position: absolute;
                background: #fff;
                border: 1px dotted black;
                padding: 5px;
                margin: 10px;
            }
            
            .yui-overlay .hd {
                border: 1px solid red;
                padding: 5px;
            }
            
            .yui-overlay .bd {
                border: 1px solid green;
                padding: 5px;
            }
            
            .yui-overlay .ft {
                border: 1px solid blue;
                padding: 5px;
            }
            
            #ctx {
                background: orange;
                width: 100px;
                height: 25px;
            }
            
            #example {
                height: 15em;
            }
        </style>
        <script>
            YAHOO.namespace("example.container");
            
            function init(){
                // Build overlay1 based on markup, initially hidden, fixed to the center of the viewport, and 300px wide
                YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", {
                    fixedcenter: true,
                    visible: false,
                    width: "300px"
                });
                YAHOO.example.container.overlay1.render();
                YAHOO.example.container.overlay1.show();
            }
            
            YAHOO.util.Event.addListener(window, "load", init);
        </script>
        <div id="overlay1" style="visibility:hidden">
            <div class="hd">
                头
            </div>
            <div class="bd">
                中间.
            </div>
            <div class="ft">
                脚
            </div>
        </div>
    </body>
</html>
